<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top: 20px">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" height="130px" />
          <div class="userInfo">
            <p class="name">hch</p>
            <p class="acess">超级管理员</p>
          </div>
        </div>
        <hr />
        <div class="logoInfo">
          <p>上次登录时间：<span>2022.7.23</span></p>
          <p>地点：<span>杭州</span></p>
        </div>
      </el-card>
      <el-card style="margin-top: 50px" shadow="hover">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="品牌" width="90">
          </el-table-column>
          <el-table-column prop="todayBuy" label="今日购买" width="90">
          </el-table-column>
          <el-table-column prop="monthBuy" label="本月购买" width="90">
          </el-table-column>
          <el-table-column prop="totalBuy" label="总购买"> </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top: 20px">
      <div >
        <el-card
          :body-style="{ display: 'flex', padding: '0px' }"
          v-for="item in countData"
          :key="item.name"
          style="display: inline-block; width: 33%; height: 80px; margin: 0px"
        >
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{ background: item.color }"
          ></i>
          <div class="detail">
            <p
              style="
                width: 100%;
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
              "
            >
              ${{ item.value }}
            </p>
            <p
              style="
                width: 100%;
                height: 30px;
                line-height: 30px;
                padding-left: 20px;
              "
            >
              {{ item.name }}
            </p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 280px" id="line">

      </el-card>
      <div style="display: flex; margin-top: 5px" >
        <el-card style="height: 250px; width: 50%" id="bar"></el-card>
        <el-card style="height: 250px; width: 50%" id="pie"></el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import{getData}from '../../api/data'
import * as echarts from 'echarts'
export default {
  name: "Home",
  data() {
    return {
      userImg: require("../assets/logo.png"),
      tableData: [],
      countData: [
        {
          name: "今支付订单",
          value: 1234,
          icon: "success",
          color: "#fff",
        },
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#fff",
        },
        {
          name: "今日收藏订单",
          value: 1234,
          icon: "success",
          color: "blue",
        },
        {
          name: "今收藏订单",
          value: 1234,
          icon: "success",
          color: "cyan",
        },
        {
          name: "今未支付订单",
          value: 1234,
          icon: "success",
          color: "skyblue",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "success",
          color: "#fff",
        },
      ],
    };
  },
  mounted(){
    getData().then(res=>{
      const {data,code}=res.data
      if(code===20000){
        this.tableData=data.tableData;
        // 折线图
        const order=data.orderData;
        const keyArray=Object.keys(order.data[0])
        const lineseries=[];
        const xlineData=order.date;
        keyArray.forEach(key=>{
          lineseries.push({
            name:key,
            data:order.data.map(item=>
              //key是带有引号的字符串，访问时只能用中括号
            item[key]
            ),
            type:'line'
          })
        })
        const lineOption={
          xAxis:{
            data:xlineData
          },
          yAxis:{},
          legend:{
            data:keyArray
          },
          series:lineseries
        } 
        const lineEcharts=echarts.init(document.getElementById('line'));
        lineEcharts.setOption(lineOption);

        //柱状图
        const barOption={
        tooltip: {},
        legend: {
            data: ['新增用户','活跃用户']
        },
        xAxis: {
          data:data.userData.map(item=>item.date)      
        },  
        yAxis: {},
        series: [
          {
            name:'新增用户',
            type: 'bar',
             data:data.userData.map(item=>item.new)  
          },
          {
            name:'活跃用户',
            type: 'bar',
            data:data.userData.map(item=>item.active)  
          }
        ]
        }
        const barEcharts=echarts.init(document.getElementById('bar'));
        barEcharts.setOption(barOption);

        //饼图
        const pieOption={
            series: [
              {
                type: 'pie',
                data: data.videoData
                
              }
            ]
        }
        const pieEcharts=echarts.init(document.getElementById('pie'));
        pieEcharts.setOption(pieOption);
        
        // console.log(data);
       
      }
     
    })
    
}}
</script>

<style scoped>
.home{
  margin-top: -30px;
}
.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logoInfo {
  margin-top: 20px;
}
.icon {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 5;
}
</style>
